<template>
  <div style="padding: 0 10px; margin-bottom: 87px">
    <div class="nomalPost" v-if="postObj.type == 1">
      <div class="header">
        <div class="back" @click="$router.back()">
          <span class="iconfont iconjiantou2"></span>
          <span class="iconfont iconnew"></span>
        </div>
        <div
          class="attention"
          :class="{ notFollow: postObj.has_follow }"
          @click="handelFollow"
        >
          {{ postObj.has_follow ? "已关注" : "关注" }}
        </div>
      </div>
      <div class="title">{{ postObj.title }}</div>
      <div class="info">{{ postObj.user.nickname }} 2020-09-25</div>
      <div class="content" v-html="postObj.content"></div>
    </div>
    <div class="videoPost" v-if="postObj.type == 2">
      <van-nav-bar
        :border="false"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
      />
      <div class="vidoe">
        <video
          src="../../assets/cont-1698645-10887340-172323-hd.mp4"
          controls
          :poster="postObj.cover[0].url"
          ref="shipin"
          @pause="pauseVideo"
        ></video>
        <div class="play" @click="playVideo" v-if="isPlay">
          <div class="iconfont iconshipin"></div>
        </div>
      </div>
      <div class="info">
        <img src="../../assets/134.jpg" alt="" />
        <div class="myname">{{ postObj.user.nickname }}</div>
        <div
          class="attention"
          @click="handelFollow"
          :class="{ notFollow: postObj.has_follow }"
        >
          {{ postObj.has_follow ? "已关注" : "关注" }}
        </div>
      </div>
      <div class="title">{{ postObj.title }}</div>
    </div>
    <div class="footer">
      <div
        class="dianzan aaa"
        :class="{ hasLike: postObj.has_like }"
        @click="handelLike"
      >
        <span class="iconfont icondianzan"></span> {{ postObj.like_length }}
      </div>
      <div class="weixin aaa">
        <span class="iconfont iconweixin"></span>微信
      </div>
    </div>
    <div class="commentList">
      <div class="title">精彩跟贴</div>
      <MainComment
        v-for="item in commentList"
        :key="item.id"
        :commentData="item"
      />
    </div>
    <div
      class="moreComment"
      @click="$router.push('/morecomment?id=' + $route.query.id)"
    >
      更多跟帖
    </div>
    <WriteComment @reload="reloadComment" />
  </div>
</template>

<script>
export default {
  components: {
    MainComment: () => import("../../components/comment/mainComment"),
    WriteComment: () => import("../../components/comment/writeComment"),
  },
  data() {
    return {
      postObj: [],
      isPlay: true,
      commentList: [],
    };
  },
  created() {
    //请求文章列表
    console.log(this.$route.query.id);
    this.$axios({
      url: "/post/" + this.$route.query.id,
    }).then((res) => {
      console.log(res.data.data);
      this.postObj = res.data.data;
    });
    //获取评论列表
    this.$axios({
      url: "/post_comment/" + this.$route.query.id,
    }).then((res) => {
      //如果评论超过三条强制显示三条
      if (res.data.data.length > 3) {
        res.data.data.length = 3;
      }
      this.commentList = res.data.data;
      console.log(this.commentList);
    });
  },
  methods: {
    //重新刷新评论列表
    reloadComment() {
      //获取评论列表
      this.$axios({
        url: "/post_comment/" + this.$route.query.id,
      }).then((res) => {
        //如果评论超过三条强制显示三条
        if (res.data.data.length > 3) {
          res.data.data.length = 3;
        }
        this.commentList = res.data.data;
        // console.log(this.commentList);
      });
    },
    handelFollow() {
      // console.log(11);
      if (this.postObj.has_follow == true) {
        //发送取消关注
        this.$axios({
          url: "/user_unfollow/" + this.postObj.user.id,
        }).then((res) => {
          console.log(res.data);
          this.postObj.has_follow = !this.postObj.has_follow;
        });
      } else {
        this.$axios({
          url: "user_follows/" + this.postObj.user.id,
        }).then((res) => {
          console.log(res.data);
          this.postObj.has_follow = !this.postObj.has_follow;
        });
      }
    },
    handelLike() {
      this.$axios({
        url: "/post_like/" + this.$route.query.id,
      }).then((res) => {
        console.log(res.data);
        // console.log(this.postObj.has_like);
        if (res.data.message == "点赞成功") {
          this.postObj.like_length += 1;
          this.postObj.has_like = !this.postObj.has_like;
        } else {
          this.postObj.like_length -= 1;
          this.postObj.has_like = !this.postObj.has_like;
        }
      });
    },
    playVideo() {
      this.$refs.shipin.play();
      this.isPlay = !this.isPlay;
    },
    pauseVideo() {
      this.isPlay = true;
    },
  },
};
</script>

<style lang="less" scoped>
.nomalPost {
  // background-color: #f2f2f2;
  .header {
    display: flex;
    align-items: center;
    .back {
      display: flex;
      align-items: center;
      .iconjiantou2 {
        font-size: 16/360 * 100vw;
        margin: 10px;
      }
      .iconnew {
        font-size: 52/360 * 100vw;
        color: pink;
      }
    }
    .attention {
      border: 1px solid #ccc;
      padding: 5px 9px;
      border-radius: 16px;
      margin-left: 180px;
      background-color: hotpink;
      &.notFollow {
        background-color: #ccc;
        color: red;
      }
    }
  }
  .title {
    font-weight: 700;
    text-indent: 13px;
  }
  .info {
    font-size: 13/360 * 100vw;
    color: rgb(94, 64, 64);
    text-indent: 13px;
    margin: 10px 0;
  }
  .content {
    font-size: 15px;
    /deep/ img {
      max-width: 100%;
      object-fit: cover;
    }
  }
}
.videoPost {
  .vidoe {
    position: relative;
    height: 211/360 * 100vw;
    /deep/ video {
      width: 100%;
      height: 100%;
    }
    margin-bottom: 20/360 * 100vw;
    .play {
      position: absolute;
      top: 66/360 * 100vw;
      left: 133/360 * 100vw;
      width: 55/360 * 100vw;
      height: 55/360 * 100vw;
      text-align: center;
      line-height: 55/360 * 100vw;
      background-color: #cccccc;
      border-radius: 50%;
      opacity: 0.6;
      .iconshipin {
        font-size: 50/360 * 100vw;
        color: #ffffff;
      }
    }
  }
  .info {
    display: flex;
    align-items: center;
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin: 5px;
    }
    .attention {
      border: 1px solid #ccc;
      padding: 5px 9px;
      width: 60px;
      text-align: center;
      border-radius: 16px;
      margin-left: 165px;
      background-color: hotpink;
      &.notFollow {
        background-color: #ccc;
        color: red;
      }
    }
    .myname {
      font-size: 15px;
      color: rgb(104, 56, 56);
    }
  }
  .title {
    margin-top: 20px;
    text-indent: 20/360 * 100vw;
  }
}
.footer {
  display: flex;
  justify-content: space-evenly;
  margin-top: 30/360 * 100vw;
  margin-bottom: 20/360 * 100vw;
  .aaa {
    border: 1px solid rgb(133, 116, 116);
    padding: 8px 25px;
    border-radius: 20/360 * 100vw;
  }
  .dianzan {
    &.hasLike {
      color: red;
      border-color: hotpink;
    }
  }
  .weixin {
    font-size: 16px;
    .iconweixin {
      font-size: 18px;
      margin-right: 6px;
      color: #0a0;
    }
  }
}
.commentList {
  margin-top: 30/360 * 100vw;
  padding-top: 20/360 * 100vw;
  border-top: 4px solid #ccc;
  border-bottom: 1px solid #888;
  margin-bottom: 20/360 * 100vw;
  .title {
    margin: 10/360 * 100vw auto;
    text-align: center;
    font-size: 20/360 * 100vw;
    color: violet;
  }
}
.moreComment {
  text-align: center;
  width: 120/360 * 100vw;
  height: 30/360 * 100vw;
  border: 1px solid #888;
  line-height: 30/360 * 100vw;
  border-radius: 15/360 * 100vw;
  margin: 10px auto;
}
</style>